<template>
    <div class="wrapper">
        <header>
            <div class="icon-location-box">
                <div class="icon-location"></div>
            </div>
            <div class="location-text">
                云南大学呈贡校区力行楼
                <i class="fa fa-caret-down" @click="handleClick(20)"></i>
            </div>
        </header>
        <div class="search">
            <div class="search-fixed-top" id="fixedBox">
                <div class="search-panel">
                    <i class="fa fa-search" style="flex:0 0 15px;padding-left: 5px;"></i>
                    <input type="search" placeholder="请输入需要查询的商品"
                           style="flex:6;outline: none;border: none;color:#9F9F9F">
<!--                    <button @click="updatePwd">刷新</button>-->
                    <button @click="new1()">测试1</button>
                    <button @click="overdatePwd">登出</button>
                    <div class="search-button" style="flex:0 0 17vw;" @click="searchClick()">搜索</div>
                </div>
            </div>
        </div>

        <div class="foodType">
            <div class="foodTypeItem" @click="handleClick(4)">
                <!--                <div v-for="food in foods" :key="food.foodId" class="foodTypeItem">
                                    <div v-if="food.foodId<=10">
                                        <img :src="food.foodImg">
                                        <p>{{food.foodName}}</p>
                                    </div>
                                </div>-->
                <img src="../img/dcfl01.png">
                <p>美食</p>
            </div>
            <div class="foodTypeItem" onclick="findFoodList(1)">
                <img src="../img/dcfl02.png">
                <p>早餐</p>
            </div>
            <div class="foodTypeItem" onclick="findFoodList(1)">
                <img src="../img/dcfl03.png">
                <p>跑腿代购</p>
            </div>
            <div class="foodTypeItem" onclick="findFoodList(1)">
                <img src="../img/dcfl04.png">
                <p>汉堡披萨</p>
            </div>
            <div class="foodTypeItem" onclick="findFoodList(1)">
                <img src="../img/dcfl05.png">
                <p>甜品饮品</p>
            </div>
            <div class="foodTypeItem" onclick="findFoodList(1)">
                <img src="../img/dcfl06.png">
                <p>速食简餐</p>
            </div>
            <div class="foodTypeItem" onclick="findFoodList(1)">
                <img src="../img/dcfl07.png">
                <p>地方小吃</p>
            </div>
            <div class="foodTypeItem" onclick="findFoodList(1)">
                <img src="../img/dcfl08.png">
                <p>米粉面馆</p>
            </div>
            <div class="foodTypeItem" onclick="findFoodList(1)">
                <img src="../img/dcfl09.png">
                <p>包子粥铺</p>
            </div>
            <div class="foodTypeItem" onclick="findFoodList(1)">
                <img src="../img/dcfl10.png">
                <p>炸鸡炸串</p>
            </div>
        </div>

        <div class="banner">
            <h3 class="h3Title" style="margin-bottom:0.5vw;">品质套餐</h3>
            <p class="bannerText" style="margin-bottom: 4vw;">搭配齐全吃得好</p>
            <a class="LinkText">立即抢购&nbsp></a>
        </div>

        <div class="superMember">
            <div class="left">
                <img src="../img/super_member.png" style="width: 6vw;height: 6vw;margin-right:2vw ;">
                <h3 class="h3Title" style="margin-right: 2vw;">超级会员</h3>
                <p class="bannerText">&#8226;&nbsp;&nbsp;每月尊享权益</p>
            </div>
            <div class="right LinkText" style="margin-right: 4vw">立即开通&nbsp;></div>
        </div>

        <div class="recommend">
            <div class="recommend-line"></div>
            <p>推荐商家</p>
            <div class="recommend-line"></div>
        </div>

        <div class="recommendType">
            <div>综合排序<i class="fa fa-caret-down"></i></div>
            <div>距离最近</div>
            <div>销量最高</div>
            <div>筛选<i class="fa fa-filter"></i></div>
        </div>
        <!--                        <div v-for="food in foods" :key="food.foodId" class="foodTypeItem">
                                    <div v-if="food.foodId<=10">
                                        <img :src="food.foodImg">
                                        <p>{{food.foodName}}</p>
                                    </div>
                                </div>-->
        <div>
            <div class="businessList" v-for="food in foods" :key="food.foodId">
                <div v-if="food.foodId===1" class="business" >
                    <img :src="food.foodImg">
                    <div class="businessInfo">
                        <div class="businessInfoHead">
                            <h3>万家饺子(软件园E18店）</h3>
                            <i class="fa fa-mobile-phone"></i>
                        </div>
                        <div class="businessInfoStart">
                            <div class="businessInfoStartLeft">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <p>&nbsp;4.9 月售345单</p>
                            </div>
                            <div class="businessInfoStartRight" style="line-height: 1;">
                                蜂鸟专送
                            </div>

                        </div>
                        <div class="businessDelivery">
                            <p>￥15起送 | ￥3配送</p>
                            <p>3.2km | 30分钟</p>
                        </div>
                        <div class="businessInfoDetail">
                            <div>
                                各种饺子
                            </div>
                        </div>
                        <div class="businessInfoPromotion">
                            <div class="businessInfoPromotionLeft">
                                <div class="businessPromotionLeftIcon">新</div>
                                <p>饿了么新用户首单立减9元</p>
                            </div>
                            <div class="businessInfoPromotionRight">
                                <p>2个活动</p>
                                <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                        <div class="businessInfoPromotion">
                            <div class="businessInfoPromotionLeft">
                                <div class="businessPromotionLeftIcon" style="background-color: #F1884F;">特
                                </div>
                                <p>特价商品5折</p>
                            </div>
                        </div>


                    </div>
                </div>
                <div class="business">
                    <img src="../img/sj02.png">
                    <div class="businessInfo">
                        <div class="businessInfoHead">
                            <h3>小锅饭豆腐馆（全运店）</h3>
                            <i class="fa fa-mobile-phone"></i>
                        </div>
                        <div class="businessInfoStart">
                            <div class="businessInfoStartLeft">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <p>&nbsp;4.8 月售412单</p>
                            </div>
                            <div class="businessInfoStartRight" style="line-height: 1;">
                                蜂鸟专送
                            </div>

                        </div>
                        <div class="businessDelivery">
                            <p>￥18起送 | ￥4配送</p>
                            <p>2km | 18分钟</p>
                        </div>
                        <div class="businessInfoDetail">
                            <div>
                                特色美食
                            </div>
                        </div>
                        <div class="businessInfoPromotion">
                            <div class="businessInfoPromotionLeft">
                                <div class="businessPromotionLeftIcon">新</div>
                                <p>饿了么新用户首单立减6元</p>
                            </div>
                            <div class="businessInfoPromotionRight">
                                <p>5个活动</p>
                                <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                        <div class="businessInfoPromotion">
                            <div class="businessInfoPromotionLeft">
                                <div class="businessPromotionLeftIcon" style="background-color: #F1884F;">特</div>
                                <p>特价商品1折</p>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="business">
                    <img src="../img/sj03.png">
                    <div class="businessInfo">
                        <div class="businessInfoHead">
                            <h3>麦当劳（雨花广场店）</h3>
                            <i class="fa fa-mobile-phone"></i>
                        </div>
                        <div class="businessInfoStart">
                            <div class="businessInfoStartLeft">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <p>&nbsp;4.9 月售666单</p>
                            </div>
                            <div class="businessInfoStartRight" style="line-height: 1;">
                                美团专送
                            </div>

                        </div>
                        <div class="businessDelivery">
                            <p>￥18起送 | ￥0配送</p>
                            <p>1.2km | 40分钟</p>
                        </div>
                        <div class="businessInfoDetail">
                            <div>
                                炸鸡汉堡
                            </div>
                        </div>
                        <div class="businessInfoPromotion">
                            <div class="businessInfoPromotionLeft">
                                <div class="businessPromotionLeftIcon">新</div>
                                <p>饿了么新用户首单立减12元</p>
                            </div>
                            <div class="businessInfoPromotionRight">
                                <p>8个活动</p>
                                <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                        <div class="businessInfoPromotion">
                            <div class="businessInfoPromotionLeft">
                                <div class="businessPromotionLeftIcon" style="background-color: #F1884F;">特</div>
                                <p>特价商品4折</p>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="business">
                    <img src="../img/sj04.png">
                    <div class="businessInfo">
                        <div class="businessInfoHead">
                            <h3>米村拌饭（呈贡店）</h3>
                            <i class="fa fa-mobile-phone"></i>
                        </div>
                        <div class="businessInfoStart">
                            <div class="businessInfoStartLeft">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>

                                <p>&nbsp;3.9 月售34单</p>
                            </div>
                            <div class="businessInfoStartRight" style="line-height: 1;">
                                蜂鸟专送
                            </div>

                        </div>
                        <div class="businessDelivery">
                            <p>￥30起送 | ￥6配送</p>
                            <p>6km | 62分钟</p>
                        </div>
                        <div class="businessInfoDetail">
                            <div>
                                各色炒饭
                            </div>
                        </div>
                        <div class="businessInfoPromotion">
                            <div class="businessInfoPromotionLeft">
                                <div class="businessPromotionLeftIcon">新</div>
                                <p>饿了么新用户首单立减1元</p>
                            </div>
                            <div class="businessInfoPromotionRight">
                                <p>1个活动</p>
                                <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                        <div class="businessInfoPromotion">
                            <div class="businessInfoPromotionLeft">
                                <div class="businessPromotionLeftIcon" style="background-color: #F1884F;">特</div>
                                <p>特价商品8折</p>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="business">
                    <img src="../img/sj06.png">
                    <div class="businessInfo">
                        <div class="businessInfoHead">
                            <h3>半亩良田（软件园E20店）</h3>
                            <i class="fa fa-mobile-phone"></i>
                        </div>
                        <div class="businessInfoStart">
                            <div class="businessInfoStartLeft">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <p>&nbsp;4.6 月售45单</p>
                            </div>
                            <div class="businessInfoStartRight" style="line-height: 1;">
                                蜂鸟专送
                            </div>

                        </div>
                        <div class="businessDelivery">
                            <p>￥18起送 | ￥3配送</p>
                            <p>4km | 30分钟</p>
                        </div>
                        <div class="businessInfoDetail">
                            <div>
                                各色炒菜
                            </div>
                        </div>
                        <div class="businessInfoPromotion">
                            <div class="businessInfoPromotionLeft">
                                <div class="businessPromotionLeftIcon">新</div>
                                <p>饿了么新用户首单立减8元</p>
                            </div>
                            <div class="businessInfoPromotionRight">
                                <p>4个活动</p>
                                <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                        <div class="businessInfoPromotion">
                            <div class="businessInfoPromotionLeft">
                                <div class="businessPromotionLeftIcon" style="background-color: #F1884F;">特</div>
                                <p>特价商品减2元</p>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="business">
                    <img src="../img/sj07.png">
                    <div class="businessInfo">
                        <div class="businessInfoHead">
                            <h3>茶兮</h3>
                            <i class="fa fa-mobile-phone"></i>
                        </div>
                        <div class="businessInfoStart">
                            <div class="businessInfoStartLeft">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <p>&nbsp;4.8 月售445单</p>
                            </div>
                            <div class="businessInfoStartRight" style="line-height: 1;">
                                蜂鸟专送
                            </div>

                        </div>
                        <div class="businessDelivery">
                            <p>￥19起送 | ￥3配送</p>
                            <p>3.2km | 30分钟</p>
                        </div>
                        <div class="businessInfoDetail">
                            <div>
                                绿茶红茶
                            </div>
                        </div>
                        <div class="businessInfoPromotion">
                            <div class="businessInfoPromotionLeft">
                                <div class="businessPromotionLeftIcon">新</div>
                                <p>饿了么新用户首单立减9元</p>
                            </div>
                            <div class="businessInfoPromotionRight">
                                <p>2个活动</p>
                                <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                        <div class="businessInfoPromotion">
                            <div class="businessInfoPromotionLeft">
                                <div class="businessPromotionLeftIcon" style="background-color: #F1884F;">特</div>
                                <p>特价商品5折</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div>&nbsp;&nbsp;&nbsp;</div><!--为上面的margin-bottom计算提供支持-->
        <div class="footer">
            <div @click="handleClick(1)"><i class="fa fa-home"></i><p>首页</p></div>
            <div><i class="fa fa-compass"></i><p>发现</p></div>
            <div @click="handleClick(2)"><i class="fa fa-file-text"></i><p>订单</p></div>
            <div @click="handleClick(3)"><i class="fa fa-user-o"></i><p>我的</p></div>
        </div>

    </div>
</template>
<script setup>
import {ref, inject} from "vue";
import axios from "axios";
import router from "../router/index.js";

const $http = inject("$axios");
const $queryStr = inject("$qs")
const password = ref("");
const userId = ref("");
const userPwd = ref("");
const userNewPwd = ref("");
const resInf = ref("");
const businessId = ref("")
const Id1=ref(1)
const foodId = ref("11");
const foods = ref([])
function new1(){
    $http.post('http://localhost:8086/student/delete',
        $queryStr.stringify({
            id:Id1.value
        })
    ).then((res)=>{
        if(res===1){
            alert("响应成功")
        }
    })

}
function updatePwd() {
    $http.post(`/api/elm_api/FoodController/getAllFoodById`,
        $queryStr.stringify({
            foodId: foodId.value
        })
    )
        .then((res) => {
            console.log(res.data)
            // alert(res)
            foods.value = res.data
            console.log(foods.value)
        });
}
function overdatePwd(){
    localStorage.clear();
}

/*
function updatePwd(){
    $http.post(`/api/elm_api/FoodController/getFoodById`,
        $queryStr.stringify({
            foodId:foodId.value,
        })
    )
        .then(res=>{
            let response=res.data*/
/*    if(response.foodName==="麻婆豆腐"){
        alert("登陆成功")
    }*/
/*            let res4=res
            let res5=Object.keys(res4)*/
/*let res1=JSON.stringify(res);
let res2=JSON.parse(res1);
/!*            const Food=res2.foodName
console.log(res)
console.log(Food)*!/
let res3=(Object.values(res2)[0])
console.log(res3)
const Food2=res3.foodName
console.log(Food2)*/
/*     let Food=ref([])
     Food.value=res.data
     console.log(Food.value)
     alert(Food.value.foodName)*/

/*alert(name)
let response=JSON.parse(res[0])/!*.businessName*!/;
alert(response)*/
/*alert(res)
/!*            alert(response.userName)*!/
if(response.foodName==="麻婆豆腐"){
    alert("登陆成功")
/!*                router.push({name:'Index'})*!/
}else {
    alert("登陆失败")
    alert(JSON.stringify(response))
    alert(response.foodName)
    alert(response.foodPrice)
}*/


function searchClick() {
    alert("搜索成功");
    $http.post(`/api/elm_api/FoodController/getAllFoodById`,
        $queryStr.stringify({
            foodId: foodId.value
        })
    )
        .then((res) => {
            console.log(res.data)
            // alert(res)
            foods.value = res.data
            console.log(foods.value)
        });
}

//页面初始化事件，用于页面初始化后的准备工作实施位置
window.onload = function () {
    document.onscroll = function () {
        //为了兼容PC端（Internet),时刻获取滚动条
        let s1 = document.documentElement.scrollTop;
        let s2 = document.body.scrollTop;
        let scroll = s1 === 0 ? s2 : s1;

        let search = document.getElementById("fixedBox")

        //获取视口宽度
        let width = document.documentElement.clientWidth;

        if (scroll >= width * 0.12) {
            search.style.position = 'fixed';
            search.style.left = '0';
            search.style.top = '0';
        } else {
            search.style.position = 'static';
        }

    }
}

function findFoodList(typeId) {
    if (typeId === 1)
        window.location.href = 'businessList.html';//静态页面跳转
}

function handleClick(Num){
    //路由负责跳转
    if (Num===1)router.push('/Index')
    if(Num===2)router.push('/OrderList')
    if(Num===3)router.push('/Login')
    if(Num===4)router.push('/BusinessList')
    if(Num===20)router.push('/Map')
}


</script>


<style scoped lang="css">
@import "../../src/css/index.css";
@import "../../src/css/global.css";
@import "../../src/css/ico.css";
@import "../../src/css/font-awesome/css/font-awesome.min.css";
@import "../../src/css/normalize.css";
</style>